<template>
	<view class="startProcess">
		<!-- <view class="homeBac"> -->
		<view class="custum-head"></view>
		<view class="head">
			<!-- <view class="left">
				<u-icon name="arrow-left" color="#fff" size="40"></u-icon>
			</view>
			<view class="title">马来西亚在线申请</view> -->
		</view>
		<!-- </view> -->

		<!-- 入境信息 -->
		<view class="enter-info">
			<view class="title-box">
				<view class="title">
					<text>入境信息</text>
				</view>
				<view class="img">
					<image class="check-icon" :src="url + '/images/entryOrder/correct.png'" mode="heightFix"
						v-if="enterInfoStatus" />
					<image class="check-icon" :src="url + '/images/entryOrder/error.png'" mode="heightFix" v-else />
					<image class="toggle-icon" :src="url + '/images/startProcess/collapse.png'" mode="heightFix"
						v-if="expandEnterInfo" @click="expandEnterInfo = false" />
					<image class="toggle-icon" :src="url + '/images/startProcess/expand.png'" mode="heightFix"
						@click="expandEnterInfo = true" v-else />
				</view>
			</view>
			<view class="detail-box" v-if="expandEnterInfo">
				<view class="form">
					<view class="row">
						<view class="form-item">
							<text class="label"><text class="required">*</text>入境日期</text>
							<view class="cu-input input" @click="handleShowEnterDate"
								:style="{ color: enterInfo.enterDate ? '#222' : 'grey', fontWeight:  enterInfo.enterDate ? 'bold' : 'inherit' }">
								{{
                  enterInfo.enterDate ? enterInfo.enterDate : "请选择"
                }}
							</view>
							<u-picker v-model="enterInfo.showEnterDate" mode="time" :params="params"
								@confirm="dateConfirm($event, 'enterInfo', 'enterDate')"></u-picker>
						</view>
						<view class="form-item">
							<text class="label"><text class="required">*</text>离开日期</text>
							<view class="cu-input input" @click="handleShowLeaveDate"
								:style="{ color: enterInfo.leaveDate ? '#222' : 'grey',fontWeight:  enterInfo.leaveDate ? 'bold' : 'inherit'  }">
								{{
                  enterInfo.leaveDate ? enterInfo.leaveDate : "请选择"
                }}
							</view>
							<u-picker v-model="enterInfo.showLeaveDate" mode="time" :params="params"
								@confirm="dateConfirm($event, 'enterInfo', 'leaveDate')"></u-picker>
						</view>
					</view>
					<view class="row">
						<view class="form-item">
							<text class="label"><text class="required">*</text>入境方式</text>
							<input class="cu-input input" v-model="enterInfo.enterWay" placeholder="请输入"
								style="font-weight: bold;"
								:style="{fontWeight:  enterInfo.enterWay ? 'bold' : 'inherit'  }" />
						</view>
						<view class="form-item">
							<text class="label"><text class="required">*</text>上一站国家</text>
							<input class="cu-input input" v-model="enterInfo.lastCountry" placeholder="请输入"
								:style="{fontWeight:  enterInfo.lastCountry ? 'bold' : 'inherit'  }" />
						</view>
					</view>
					<view class="row">
						<view class="form-item">
							<text class="label"><text class="required">*</text>抵达航班号/船次/车次</text>
							<input class="cu-input input" v-model="enterInfo.wayNumber" placeholder="请输入"
								:style="{fontWeight:  enterInfo.wayNumber ? 'bold' : 'inherit'  }" />
						</view>
					</view>
					<view class="row">
						<view class="form-item">
							<text class="label"><text class="required">*</text>住宿</text>
							<input style="flex: 1;" class="cu-input input" v-model="enterInfo.host" placeholder="请输入"
								:style="{fontWeight:  enterInfo.host ? 'bold' : 'inherit'  }" />
							<u-radio-group class="cu-radio-group" v-model="enterInfo.hostType">
								<u-radio active-color="#1C71F4" v-for="(name, index) in hostTypes" :key="index"
									:name="name" class="cu-radio">
									{{ name }}
								</u-radio>
							</u-radio-group>
						</view>
					</view>
					<view class="row">
						<view class="form-item">
							<text class="label"><text class="required">*</text>住宿城市</text>
							<input class="cu-input input placebold" v-model="enterInfo.hostCity" placeholder="请输入"
								:style="{fontWeight:  enterInfo.hostCity ? 'bold' : 'inherit'  }" />
						</view>
					</view>
					<view class="row">
						<view class="form-item">
							<text class="label"><text class="required">*</text>马来住址</text>
							<input class="cu-input textarea" v-model="enterInfo.address"
								:style="{fontWeight:  enterInfo.address ? 'bold' : 'inherit'  }" placeholder="请输入" />
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 个人信息 -->
		<view class="personal-info">
			<view class="title-box">
				<view class="title">
					<text>个人信息</text>
				</view>
				<view class="img">
					<image class="check-icon" :src="url + '/images/entryOrder/error.png'" mode="heightFix"
						v-if="!personalInfoStatus" />
					<image class="check-icon" :src="url + '/images/entryOrder/correct.png'" mode="heightFix" v-else />
					<image class="toggle-icon" :src="url + '/images/startProcess/collapse.png'" mode="heightFix"
						v-if="expandPersonalInfo" @click="expandPersonalInfo = false" />
					<image class="toggle-icon" :src="url + '/images/startProcess/expand.png'" mode="heightFix"
						@click="expandPersonalInfo = true" v-else />
				</view>
			</view>
			<view class="detail-box" v-if="expandPersonalInfo">
				<view class="detail-box__inner">
					<view class="top">
						<view class="title">
							<text>护照首页</text>
						</view>
						<view class="img">
							<image class="del-icon" :src="url + '/images/entryOrder/delete.png'" mode="heightFix" />
							<text class="deleTxt">删除</text>
							<image class="toggle-icon" :src="url + '/images/startProcess/collapse.png'" mode="heightFix"
								v-if="personalInfo.expandPassport" @click="personalInfo.expandPassport = false" />
							<image class="toggle-icon" :src="url + '/images/startProcess/expand.png'" mode="heightFix"
								@click="personalInfo.expandPassport = true" v-else />
						</view>
					</view>
					<view class="upload-box">
						<u-upload :action="uploadUrl" class="uploadContent"></u-upload>
						<view class="uploadCustom">
							<view class="upload-icon"></view>
							<view class="upload-text">
								<view>
									<image class="upload-icon1" :src="url + '/images/entryOrder/camara.png'"
										mode="heightFix" />
								</view>
								<view>
									<text class="scbold">上传护照，自动识别</text>
								</view>
							</view>
						</view>
					</view>
					<view class="aiBox">
						<image class="upload-icon" :src="url + '/images/entryOrder/attion.png'" mode="heightFix" />
						AI识别仅为辅助，请您仔细核对修改
					</view>
					<view class="nationality">
						<view class="title">手动录入</view>
						<view class="nation-box">
							<view class="label">
								<text>国籍</text>
							</view>
							<view class="value">
								<text>{{ personalInfo.nationality }}</text>
							</view>
						</view>
					</view>
					<view class="form form2" v-if="personalInfo.expandPassport">
						<view class="row">
							<view class="form-item">
								<text class="label"><text class="required">*</text>护照号</text>
								<input class="cu-input input"
									:style="{fontWeight:  personalInfo.passportNumber ? 'bold' : 'inherit'  }"
									v-model="personalInfo.passportNumber" placeholder="请输入" />
							</view>
							<view class="form-item">
								<text class="label"><text class="required">*</text>有效期</text>
								<input class="cu-input input" v-model="personalInfo.period"
									@focus="personalInfo.showPeriod = true" placeholder="请选择"
									:style="{fontWeight:  personalInfo.showPeriod ? 'bold' : 'inherit'  }" />
								<u-select v-model="personalInfo.showPeriod" :list="periodOpts"
									@confirm="periodConfirm"></u-select>
							</view>
						</view>
						<view class="row">
							<view class="form-item">
								<text class="label"><text class="required">*</text>中文姓</text>
								<input class="cu-input input" v-model="personalInfo.lastName" placeholder="请输入"
									:style="{fontWeight:  personalInfo.lastName ? 'bold' : 'inherit'  }" />
							</view>
							<view class="form-item">
								<text class="label"><text class="required">*</text>拼音姓</text>
								<input class="cu-input input" v-model="personalInfo.lastNameSpell" placeholder="请输入"
									:style="{fontWeight:  personalInfo.lastNameSpell ? 'bold' : 'inherit'  }" />
							</view>
						</view>
						<view class="row">
							<view class="form-item">
								<text class="label"><text class="required">*</text>中文名</text>
								<input class="cu-input input" v-model="personalInfo.firstName" placeholder="请输入"
									:style="{fontWeight:  personalInfo.firstName ? 'bold' : 'inherit'  }" />
							</view>
							<view class="form-item">
								<text class="label"><text class="required">*</text>拼音名</text>
								<input class="cu-input input" v-model="personalInfo.firstNameSpell" placeholder="请输入"
									:style="{fontWeight:  personalInfo.firstNameSpell ? 'bold' : 'inherit'  }" />
							</view>
						</view>
						<view class="row">
							<view class="form-item">
								<text class="label"><text class="required">*</text>性别</text>
								<u-radio-group class="cu-radio-group" v-model="personalInfo.hostType">
									<u-radio active-color="#1C71F4" v-for="(name, index) in sexOpts" :key="index"
										:name="name" class="cu-radio" style="font-weight: bold;">
										{{ name }}
									</u-radio>
								</u-radio-group>
							</view>
							<view class="form-item">
								<text class="label"><text class="required">*</text>出生日期</text>
								<input class="cu-input input" v-model="personalInfo.dateOfBirth" placeholder="请输入"
									@click="personalInfo.showDateOfBirth = true"
									:style="{fontWeight:  personalInfo.dateOfBirth ? 'bold' : 'inherit'  }" />
								<u-picker v-model="personalInfo.showDateOfBirth" mode="time" :params="params"
									@confirm="dateConfirm($event, 'personalInfo', 'dateOfBirth')"></u-picker>
							</view>
						</view>
						<view class="row" style="padding: 30rpx 0 28rpx; border: none">
							<view class="form-item">
								<text class="label"><text class="no-required">*</text>国家区号</text>
								<input class="cu-input input"
									:style="{fontWeight:  personalInfo.countryCode ? 'bold' : 'inherit'  }"
									v-model="personalInfo.countryCode" placeholder="+86" />
							</view>
							<view class="form-item">
								<text class="label"><text class="required">*</text>手机号码</text>
								<input class="cu-input input"
									:style="{fontWeight:  personalInfo.phoneNumber ? 'bold' : 'inherit'  }"
									v-model="personalInfo.phoneNumber" placeholder="请输入" />
							</view>
						</view>
						<view class="save-btn">
							<button class="cu-button" @click="save">保存</button>
						</view>
					</view>
				</view>
			</view>
			<view class="add-btn-box" v-if="expandPersonalInfo">
				<view class="add-btn" @click="add">
					<image class="add-btn__icon" :src="url + '/images/entryOrder/add.png'" mode="heightFix" />
					<text class="add-btn__text">新增申请人</text>
				</view>
			</view>
		</view>

		<!-- 提交 -->
		<view :class="{
        'submit-box': true,
        'hide-submit-box': collapseSubmit,
        fixBox: handleFixBox(expandEnterInfo, expandPersonalInfo),
      }">
			<view class="pay-service">
				<u-checkbox shape="circle" class="cu-radio" v-model="agree" active-color="#1C71F4">

				</u-checkbox>
				<text class="text">此代填服务为有偿服务，服务完成后，不能取消或修改;希望免费者，可自行访问官方英文网站进行申请。</text>
			</view>
			<view class="submit-btn" @click="submit">提交</view>
		</view>

		<!-- 悬浮球 -->
		<!-- <view class="flow-ball">
			<image class="talk-icon" :src="url + '/images/entryOrder/complaint.png'" mode="heightFix" />
		</view> -->
		<movable-area class="drag-area">
			<!-- 可拖拽视图 -->
			<movable-view class="movable-compla" direction="all" :x="position.x" :y="position.y" @change="onDragChange">
				<view class="compla">
					<image class="icon_img" :src="url + '/kf.png'" mode="heightFix" />
				</view>
			</movable-view>
		</movable-area>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				position: {
					x: 0,
					y: 0
				},
				top: 200, // 初始位置
				left: 200,
				startX: 0, // 触摸起点X
				startY: 0, // 触摸起点Y
				offsetX: 0, // 元素初始偏移X
				offsetY: 0,
				url: "https://file.aavisa.com/001",
				params: {
					year: true,
					month: true,
					day: true,
				},
				uploadUrl: "",
				// 入境信息
				// 住宿方式
				hostTypes: ["自有地址", "随机地址"],
				enterInfoStatus: true,
				expandEnterInfo: true,
				enterInfo: {
					// 入境日期
					showEnterDate: false,
					enterDate: "",
					// 离开日期
					showLeaveDate: false,
					leaveDate: "",
					// 入境方式
					enterWay: "飞机",
					// 上一站国家
					lastCountry: "中国",
					// 抵达航班号/船次/车次
					wayNumber: "",
					// 住宿
					host: "",
					hostType: "",
					// 住宿城市
					zhusu: "吉隆坡",
					hostCity: "酒店/民宿/客栈",
					// 马来住址
					address: "1020 JL SULTAN ISMAIL KAMPUNG BARU KUALA...",
				},
				// 个人信息
				personalInfoStatus: false,
				expandPersonalInfo: true,
				// 有效期
				periodOpts: [{
						value: "3个月",
						label: "3个月",
					},
					{
						value: "半年",
						label: "半年",
					},
					{
						value: "1年",
						label: "1年",
					},
					{
						value: "5年",
						label: "5年",
					},
				],
				// 性别选项
				sexOpts: ["男", "女"],
				personalInfo: {
					expandPassport: true,
					// 国籍
					nationality: "中国",
					// 护照号
					passportNumber: "",
					// 有效期
					showPeriod: false,
					period: "",
					// 中文姓
					lastName: "",
					// 拼音姓
					lastNameSpell: "",
					// 中文名
					firstName: "",
					// 拼音名
					firstNameSpell: "",
					// 性别
					sex: "",
					// 出生日期
					showDateOfBirth: false,
					dateOfBirth: "",
					// 国家区号
					countryCode: "",
					// 手机号码
					phoneNumber: "",
				},
				agree: false,
				collapseSubmit: false,
			};
		},
		mounted() {
			this.resetPosition();

		},
		methods: {
			onDragChange(e) {
				// this.position = {
				// 	x: e.windowWidth - elementWidth - uni.upx2px(24), // 右侧24rpx
				// 	y: e.windowHeight - elementHeight - uni.upx2px(250) // 底部250rpx
				// };
			},

			// 设置初始位置（示例：右下角20rpx位置）
			resetPosition() {
				uni.getSystemInfo({
					success: (res) => {
						const elementWidth = uni.upx2px(100); // 元素宽度(与CSS中保持一致)
						const elementHeight = uni.upx2px(100); // 元素高度

						// 计算初始位置
						this.position = {
							x: res.windowWidth - elementWidth - uni.upx2px(24), // 右侧24rpx
							y: res.windowHeight - elementHeight - uni.upx2px(250) // 底部250rpx
						};
					}
				});
			},
			dateConfirm(obj, source, key) {
				this[source][key] = `${obj.year}/${obj.month}/${obj.day}`;
			},
			periodConfirm(arr) {
				const obj = arr[0];
				this.personalInfo.period = obj.value;
			},
			save() {},
			add() {},
			submti() {},
			handleFixBox(isEnter, isPerson) {
				if (!isEnter && !isPerson) {
					return true;
				} else {
					if (!isPerson) {
						return true;
					} else {
						return false;
					}
				}
			},
			handleShowEnterDate() {
				this.enterInfo.showEnterDate = true;
			},
			handleShowLeaveDate() {
				this.enterInfo.showLeaveDate = true;
			},
		},
	};
</script>

<style lang="scss">
	.pay-service {
		display: flex;
		align-items: center;
	}

	@keyframes bounceDown {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.1);
		}

		0% {
			transform: scale(1);
		}
	}

	// .u-checkbox__label {
	// 	margin-right: 0 !important;
	// }

	.drag-area {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		/* 防止拦截底层事件 */
	}

	/* 可拖拽元素样式 */
	.movable-compla {
		width: 100rpx;
		/* 根据实际图片尺寸调整 */
		height: 100rpx;
		/* 根据实际图片尺寸调整 */
		pointer-events: auto;
		/* 启用拖拽事件 */
	}

	.compla {
		// position: fixed;
		right: 24rpx;
		bottom: 250rpx;
		height: 100rpx;
		width: 100rpx;
		background: #226BF6;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		// position: relative;

		.icon_img {
			width: 60rpx;
			height: 60rpx;
			animation: bounceDown 1s linear infinite;
		}
	}

	.nationality {
		margin-bottom: 10rpx;
	}

	::v-deep .u-list-item {
		background: transparent !important;
		width: 536rpx !important;
		height: 260rpx !important;
		z-index: 999 !important;
	}

	.u-checkbox {
		line-height: 30rpx;
		color: #49596D;
	}

	.placebold::placeholder {
		font-weight: bold;
	}

	.placebold .uni-input-input {
		font-weight: bold;
	}

	::v-deep .uicon-plus {
		display: none !important;
	}

	::v-deep .u-add-tips {
		display: none !important;
	}
</style>

<style lang="scss" scoped>
	$imgUrl: "https://file.aavisa.com/001";

	uni-page-body {
		height: 100%;
	}

	.custum-head {
		height: 80rpx;
	}

	.startProcess {
		width: 100%;
		height: 100%;
		background: #f2f4f7 url($imgUrl + "/images/entryOrder/orderBac.png") no-repeat top;
		background-size: 100.5% 592rpx;

		// background: url($imgUrl + "/images/entryOrder/orderBac.png") no-repeat center;
		// background-size: cover;
		overflow: hidden auto;
		position: relative;

		// .homeBac {
		//   width: 100%;
		//   height: 100rpx;
		//   background: url($imgUrl + "/images/entryOrder/orderBac.png") no-repeat
		//     center;
		//   background-size: cover;
		//   .head {
		//     color: #222222;
		//     display: flex;
		//     font-size: 40rpx;
		//     padding: 0 23rpx;
		//     height: 90rpx;
		//     align-items: center;
		//     .title {
		//       font-weight: bold;
		//       font-size: 32rpx;
		//       color: #ffffff;
		//     }
		//   }
		// }
		.fixBox {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
		}

		.head {
			display: flex;
			align-items: center;
			height: 90rpx;
			padding: 0 31rpx 0 33rpx;

			.left {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 2rpx;
			}

			.title {
				width: 100%;
				font-weight: bold;
				font-size: 32rpx;
				color: #fff;
			}
		}

		.enter-info {
			background: linear-gradient(180deg, #eef4fe 0%, #fefeff 60%, #fff 100%);
			box-shadow: 0rpx 1rpx 16rpx 0rpx rgba(143, 172, 162, 0.15);
			border-radius: 20rpx;
			min-height: 130rpx;
			position: relative;
			overflow: hidden;
			margin: 20rpx 31rpx 0 33rpx;
			border-left: 6rpx solid #fff;
			border-right: 6rpx solid #fff;

			.title-box {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				height: 110rpx;
				background: #ffffff;
				box-shadow: 0rpx 1rpx 16rpx 0rpx rgba(143, 172, 162, 0.15);
				border-radius: 20rpx;
				display: flex;
				justify-content: space-between;
				align-item: center;
				padding: 0rpx 30rpx 0rpx;

				.title {
					font-family: PingFang SC;
					font-weight: 600;
					font-size: 33rpx;
					color: #222222;
					line-height: 36rpx;
					display: flex;
					align-items: center;
					padding-left: 24rpx;
					position: relative;

					&:after {
						content: "";
						position: absolute;
						width: 10rpx;
						height: 28rpx;
						background: #FFD800;
						border-radius: 5rpx;
						left: 0;
						top: 50%;
						transform: translate(0, -50%);
					}
				}

				.img {
					display: flex;
					align-items: center;

					.check-icon {
						width: 35.6rpx;
						height: 35.6rpx;
						margin-right: 22rpx;
					}

					.toggle-icon {
						width: 32rpx;
						height: 32rpx;
					}
				}
			}

			.detail-box {
				margin-top: 110rpx;
				padding: 0rpx 32rpx;

				.form {
					overflow: hidden;

					.row {
						display: flex;
						padding: 25rpx 0 24rpx;
						border-bottom: 1rpx dashed #E4E7EC;

						.form-item {
							flex: 1;
							display: flex;

							.label {
								font-family: PingFang SC;
								font-weight: 400;
								font-size: 26rpx;
								color: #666666;
								line-height: 36rpx;
								margin-right: 21rpx;
								white-space: nowrap;
								display: flex;
								align-items: center;

								.required {
									font-family: PingFang SC;
									font-weight: 400;
									font-size: 26rpx;
									color: #e3244c;
									line-height: 36rpx;
									margin-right: 9rpx;
								}
							}

							.cu-input {
								font-family: PingFang SC;
								font-weight: 400;
								font-size: 26rpx;
								color: #222222;
								line-height: 36rpx;
							}

							.cu-radio-group {
								flex-wrap: nowrap;

								.cu-radio ::v-deep .u-radio__icon-wrap {
									width: 24rpx;
									height: 24rpx;
									border-radius: 50%;
									border: 2rpx solid #999999;
								}

								.cu-radio ::v-deep .u-radio__label {
									font-family: PingFang SC;
									font-weight: 400;
									font-size: 24rpx;
									color: #000;
									line-height: 36rpx;
									margin-left: 20rpx;
									margin-right: 27rpx;
								}
							}
						}
					}
				}
			}
		}

		.personal-info {
			// margin-top: 30rpx;
			// background: #ffffff;
			background: linear-gradient(180deg, #eef4fe 0%, #fefeff 60%, #fff 100%);
			box-shadow: 0rpx 1rpx 16rpx 0rpx rgba(143, 172, 162, 0.15);
			border-radius: 30rpx;
			min-height: 130rpx;
			position: relative;
			overflow: hidden;
			margin: 30rpx 31rpx 0 33rpx;
			border-left: 6rpx solid #fff;
			border-right: 6rpx solid #fff;

			.top {
				display: flex;
				justify-content: space-between;

				.title {
					height: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #222222;
					line-height: 36rpx;
					text-align: left;

				}

				.img {
					display: flex;
					align-items: center;

					.del-icon {
						width: 32rpx;
						height: 32rpx;
						margin-right: 19rpx;
					}

					.toggle-icon {
						width: 32rpx;
						height: 32rpx;
					}
				}
			}

			.upload-box {
				margin: 24rpx 0 20rpx 0;
				position: relative;

				uni-view {
					width: 100%;
					// background: red;
				}

				.upload-icon {
					width: 100%;
					height: 264rpx;
					background: rgba(227, 232, 240, 0.57);
					border-radius: 10rpx;
					border: 2px dashed #c6cfde;
				}

				.uploadCustom {
					position: absolute;
					top: 10rpx;
					left: 0;
					right: 0;

					.upload-icon1 {
						width: 64rpx;
						height: 64rpx;
					}
				}

				.upload-text {
					position: absolute;
					bottom: 76rpx;
					left: 0rpx;
					right: 0rpx;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #999999;
					line-height: 36rpx;
					text-align: center;
				}
			}

			.title-box {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				height: 108rpx;
				background: #ffffff;
				box-shadow: 0rpx 1rpx 16rpx 0rpx rgba(143, 172, 162, 0.15);
				border-radius: 30rpx;
				display: flex;
				justify-content: space-between;
				align-item: center;
				padding: 0rpx 30rpx 0rpx;
				position: relative;
				padding-left: 24rpx;

				&:after {
					content: "";
					position: absolute;
					width: 10rpx;
					height: 28rpx;
					background: #FFD800;
					border-radius: 5rpx;
					left: 0;
					top: 50%;
					transform: translate(0, -50%);
				}

				.title {
					font-family: PingFang SC;
					font-weight: 600;
					font-size: 36rpx;
					color: #222222;
					line-height: 36rpx;
					display: flex;
					align-items: center;
				}

				.img {
					display: flex;
					align-items: center;

					.check-icon {
						width: 35.6rpx;
						height: 35.6rpx;
						margin-right: 22rpx;
					}

					.toggle-icon {
						width: 32rpx;
						height: 32rpx;
					}
				}
			}

			.aiBox {
				// font-weight: bold;
				font-size: 26rpx;
				color: #089bab;
				// margin-top: 74rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.upload-icon {
					width: 26rpx;
					height: 26rpx;
					margin-right: 6rpx;
				}
			}

			.nationality {
				.title {
					font-weight: bold;
					font-size: 28rpx;
					color: #000000;
					margin-top: 30rpx;
					margin-bottom: 28rpx;
				}

				.nation-box {
					display: flex;

					.label {
						font-weight: 500;
						font-size: 26rpx;
						color: #666666;
						margin-right: 19rpx;
					}

					.value {
						font-weight: bold;
						font-size: 26rpx;
						color: #101d34;
					}
				}
			}

			.detail-box {
				margin-top: 0rpx;
				padding: 0rpx 30rpx;

				.detail-box__inner {
					// background: #f4f9f9;
					border-radius: 30rpx;
					padding: 34rpx 0rpx 30rpx 0rpx;


					.deleTxt {
						color: #dd3131;
						margin-right: 35rpx;
					}

					.form {
						overflow: hidden;
						border-top: 1px dashed #eee;
						margin-top: 20rpx;

						.row {
							display: flex;
							padding: 25rpx 0 24rpx;
							border-bottom: 1rpx dashed #eee;

							.form-item {
								flex: 1;
								display: flex;

								.label {
									font-family: PingFang SC;
									font-weight: 400;
									font-size: 26rpx;
									color: #666666;
									line-height: 36rpx;
									margin-right: 39rpx;
									white-space: nowrap;
									display: flex;
									align-items: center;

									.required {
										font-family: PingFang SC;
										font-weight: 400;
										font-size: 26rpx;
										color: #e3244c;
										line-height: 36rpx;
										margin-right: 9rpx;
									}

									.no-required {
										font-family: PingFang SC;
										font-weight: 400;
										font-size: 26rpx;
										color: transparent;
										line-height: 36rpx;
										margin-right: 9rpx;
									}
								}

								.cu-input {
									font-family: PingFang SC;
									font-weight: 400;
									font-size: 26rpx;
									color: #222222;
									line-height: 36rpx;
									flex: 1;

								}

								.cu-radio-group {
									flex-wrap: nowrap;

									.cu-radio ::v-deep .u-radio__icon-wrap {
										width: 24rpx;
										height: 24rpx;
										border-radius: 50%;
										border: 2rpx solid #999999;
									}

									.cu-radio ::v-deep .u-radio__label {
										font-family: PingFang SC;
										font-weight: 400;
										font-size: 26rpx;
										color: #333333;
										line-height: 36rpx;
										margin-left: 10rpx;
										margin-right: 10rpx;
									}
								}
							}
						}

						.save-btn {
							width: 100%;
							height: 88rpx;

							.cu-button {
								width: 100%;
								height: 100%;
								background: #1c71f4;
								color: #fff;
								font-weight: bold;
								font-size: 36rpx;
								border-radius: 44rpx;
							}
						}
					}
				}
			}

			.add-btn-box {
				margin: 0rpx 39rpx 30rpx 21rpx;

				.add-btn {
					// height: 68rpx;
					// background: rgba(1, 211, 158, 0.1);
					// border-radius: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					.add-btn__icon {
						width: 28rpx;
						height: 28rpx;
						margin-right: 9rpx;
					}

					.add-btn__text {
						font-family: PingFang SC;
						// font-weight: 500;
						font-size: 32rpx;
						color: #1f72f4;
						line-height: 50rpx;
					}
				}
			}
		}

		.submit-box {
			// position: fixed;
			// left: 0;
			// right: 0;
			// bottom: 0;
			// margin-top: -10rpx;
			// height: 320rpx;
			// background: #ffffff;
			box-shadow: 0rpx 1rpx 30rpx 0rpx rgba(123, 140, 163, 0.12);
			border-radius: 50rpx 50rpx 0rpx 0rpx;
			padding: 32rpx 33rpx 0rpx 31rpx;

			.submit-btn {
				height: 94rpx;
				background: #01d39e;
				border-radius: 47rpx;
				font-family: PingFang SC;
				// font-weight: 600;
				margin-bottom: 60rpx;
				font-size: 38rpx;
				color: #ffffff;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #1c71f4;
			}

			.pay-service {
				margin-bottom: 27rpx;

				.text {
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
					line-height: 30rpx;
					margin-left: -16rpx;

					span {
						line-height: 26rpx;
					}
				}
			}
		}

		.hide-submit-box {
			bottom: -300rpx;
		}

		.flow-ball {
			position: fixed;
			right: 24rpx;
			bottom: 379rpx;
			// width: 92rpx;
			// height: 92rpx;
			// background: #01d39e;
			// box-shadow: 0rpx 21rpx 24rpx 0rpx rgba(177, 184, 190, 0.35);
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;

			.talk-icon {
				width: 100rpx;
				height: 100rpx;
			}
		}
	}

	.startProcess .submit-box .pay-service .text span {
		line-height: 13px;
	}

	.startProcess .personal-info .title-box {
		padding-left: 50rpx;
	}

	.startProcess .personal-info .title-box:after {
		left: 28rpx;
	}

	.startProcess .personal-info .title-box {
		border-radius: 20rpx !important;
	}

	.save-btn {
		margin-top: 20rpx;
	}

	.startProcess .personal-info .title-box .title {
		font-size: 32rpx;
	}

	.startProcess .enter-info .detail-box .form .row .form-item .cu-input {
		flex: 1;
	}

	.scbold {
		font-weight: bold;
	}
</style>